<!-- 截流 -->
<template>
  <div class="box">
    <div class="scroll" ref="previewText" @scroll.passive="fnScroll"></div>
  </div>
</template>

<script>
export default {
  name: "globalHospot",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    fnHandleScroll(e) {
      console.log("scroll触发了：" + this.count++, new Date());
    },
    fnThrottle(fn, delay, atleast) {
      //节流函数
      let timer = null;
      let previous = null;
      return function () {
        let now = +new Date();
        if (!previous) previous = now;
        if (atleast && now - previous > atleast) {
          fn();
          previous = now;
          clearTimeout(timer);
        } else {
          clearTimeout(timer);
          timer = setTimeout(() => {
            fn();
            previous = null;
          }, delay);
        }
      };
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.fnScroll = this.fnThrottle(this.fnHandleScroll, 1000); //刚创建时执行
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang='scss' scoped>
</style>